import React, { useState, useEffect } from 'react'
import { NavBar, Sticky, Popup } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { ArrowLeft } from '@nutui/icons-react'
import { useNavigate, useSearchParams } from "react-router-dom"
import axios from 'axios'

export default function Detail() {
    const [flag, setFlag] = useState(0)
    const [showBasic, setShowBasic] = useState(false)
    const [showBasic1, setShowBasic1] = useState(false)
    const [showBasic2, setShowBasic2] = useState(false)
    const [currentTime, setCurrentTime] = useState(getCurrentTime())
    const [searchParams] = useSearchParams();
    const [id] = useState(searchParams.get("id") || "")
    const [list, setList] = useState([])
    let navigate = useNavigate()

    function getCurrentTime() {
        let date = new Date();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        minutes = (minutes < 10 ? '0' : '') + minutes;
        return `${hours}:${minutes}`;
    }

    useEffect(() => {
        getlist()
        const intervalId = setInterval(() => {
            setCurrentTime(getCurrentTime());
        }, 3000);
        return () => clearInterval(intervalId);
    }, []);

    let getlist = async () => {
        let { data: { data } } = await axios.get('http://localhost:3000/tmbrxlist')
        setList(data)
    }
    return (
        <div style={{ backgroundColor: "#F2F2F2", height: "130vh" }}>
            <Sticky threshold={0} position='top'>
                <div style={{ backgroundColor: "white", width: "100%", height: "46px", lineHeight: "46px", top: 0 }}>
                    <p style={{ float: "left", fontSize: "18px", position: "relative", left: "15px", top: "0px" }}>{currentTime}</p>
                    <span style={{ float: "right", marginRight: "14px", marginTop: "2px" }}>
                        <svg style={{ margin: "0px 2px" }} t="1721620058419" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10971" width="18" height="18"><path d="M0 704h208v192H0zM272 512h208v384H272zM544 288h208v608H544zM816 128h208v768H816z" p-id="10972" fill="#2c2c2c"></path></svg>
                        <svg style={{ margin: "0px 2px" }} t="1721619897930" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2615" width="18" height="18"><path d="M0 352.832l93.12 98.752c231.296-245.44 606.464-245.44 837.76 0L1024 352.832C741.44 53.056 283.008 53.056 0 352.832z m372.352 395.008L512 896l139.648-148.16c-76.8-81.92-202.048-81.92-279.296 0zM186.24 550.4l93.12 98.752c128.448-136.32 336.96-136.32 465.408 0L837.824 550.4c-179.648-190.592-471.488-190.592-651.648 0z" fill="#000000" p-id="2616"></path></svg>
                        <svg style={{ position: "relative", top: "2px" }} t="1721620142022" className="icon newdc" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12310" width="25" height="25"><path d="M167.4 374.1h620.3v275.7H167.4z" p-id="12311" fill="#2c2c2c"></path><path d="M930.1 408.6H891V305.2c0-19-15.5-34.5-34.5-34.5h-758c-18.9 0-34.5 15.5-34.5 34.5v413.5c0 18.9 15.5 34.5 34.5 34.5h758.2c18.9 0 34.5-15.5 34.5-34.5V615.4h39.1c16.5 0 29.9-13.4 29.9-29.9v-147c-0.2-16.4-13.6-29.9-30.1-29.9zM822.2 684.3H132.9V339.7h689.2v344.6z" p-id="12312" fill="#2c2c2c"></path></svg>
                    </span>
                </div>
                <div style={{ position: "relative", top: -10, }}>
                    <div style={{ width: "414px" }}>
                        <NavBar style={{ width: "100%", marginTop: "-50px", backgroundColor: "white", }}
                            titleAlign="left"
                            back={<ArrowLeft />}
                            onBackClick={() => { navigate(-1) }}>
                            <div>处方详情</div>
                        </NavBar>
                    </div>
                    {
                        list.filter(item => item._id === id).map(item => (
                            <div key={item._id} style={{ marginTop: "-22px", backgroundColor: "#0079FE", color: "white", height: "45px", width: "100%" }}>
                                <span style={{ lineHeight: "45px", marginLeft: "40px" }}>{item.flag === 0 ? "审核未通过" : item.flag === 1 ? "审核中" : item.flag === 2 ? "审核通过，待支付" : "审核通过，已支付"}</span>
                            </div>
                        ))
                    }

                </div>
            </Sticky>
            {
                list.filter(item => item._id === id).map(item => (
                    <div key={item._id}>
                        <div style={{ backgroundColor: "white", height: "170px", marginTop: "-10px" }}>
                            <div style={{ color: "#AFA5A5", display: "flex", justifyContent: "space-between", padding: "20px 30px" }}>
                                <span>NO：{item._id}</span>
                                <span>2024-09-04</span>
                            </div>
                            <div style={{ padding: "0px 30px" }}>
                                <div style={{ margin: "10px 0px" }}>患者姓名：{item.name}</div>
                                <div style={{ margin: "10px 0px" }}>年龄：{item.age}</div>
                                <div style={{ margin: "10px 0px" }}>性别：{item.sex}</div>
                            </div>
                        </div>
                        <div style={{ height: "160px", padding: "0px 30px", marginTop: "10px", backgroundColor: "white" }}>
                            <div style={{ paddingTop: "20px" }}>处方医师：{item.doctor}</div>
                            <div style={{ margin: "10px 0px" }}>科室：{item.department}</div>
                            <div style={{ margin: "10px 0px" }}>初步诊断：{item.diagnosis}</div>
                            <div style={{ margin: "10px 0px" }}>处理意见：{item.opinion}</div>
                        </div>
                        <div style={{ padding: "0px 10px", marginTop: "10px", backgroundColor: "white" }}>
                            <div style={{ padding: "10px 0px" }}>
                                <span>Rp</span>
                            </div>
                            <div style={{ padding: "5px 20px", height: "290px" }}>
                                <div style={{ display: "flex", justifyContent: "space-between" }}>
                                    <div style={{ margin: "5px 0px" }}>{item.drug1}</div>
                                    <div>x1</div>
                                </div>
                                <div style={{ marginBottom: "30px" }}>
                                    <div style={{ margin: "10px 0px" }}>规格：{item.specs1}*7粒/盒</div>
                                    <div style={{ margin: "10px 0px" }}>口服：成人一次{item.specs1}(1粒)，每天一次</div>
                                </div>
                                <hr />
                                <div style={{ marginTop: "30px", display: "flex", justifyContent: "space-between" }}>
                                    <div style={{ margin: "5px 0px" }}>{item.drug2}</div>
                                    <div>x1</div>
                                </div>
                                <div>
                                    <div style={{ margin: "10px 0px" }}>规格：{item.specs1}*7 片/盒</div>
                                    <div style={{ margin: "10px 0px" }}>口服：成人一次{item.specs1}(1片)，每天一次</div>
                                </div>
                            </div>
                        </div>
                        {
                            item.flag === 0 ?
                                <div style={{ height: "80px", padding: "0px 30px", marginTop: "10px", backgroundColor: "white" }}>
                                    <div style={{ paddingTop: "20px" }}>备注：所开处方与原始处方用法用量有出入，</div>
                                    <div>请仔细核对</div>
                                </div>
                                : item.flag === 1 ?
                                    <div style={{ height: "80px" }}></div>
                                    : item.flag === 2 ?
                                        <div style={{ height: "80px" }}></div>
                                        : <div style={{ padding: "0px 30px", marginTop: "10px", backgroundColor: "white" }}>
                                            <div style={{ fontSize: "18px" }}>订单信息</div>
                                            <div style={{ padding: "5px 0px" }}>
                                                <div style={{ marginRight: "30px", display: "inline-block" }}>订单编号</div>
                                                <div style={{ display: "inline-block" }}>20200308095500</div>
                                            </div>
                                            <div style={{ padding: "5px 0px" }}>
                                                <div style={{ marginRight: "30px", display: "inline-block" }}>支付状态</div>
                                                <div style={{ display: "inline-block" }}>已支付</div>
                                            </div>
                                            <div style={{ padding: "5px 0px" }}>
                                                <div style={{ marginRight: "30px", display: "inline-block" }}>应付金额</div>
                                                <div style={{ display: "inline-block" }}>¥ 50</div>
                                            </div>
                                            <div style={{ padding: "5px 0px" }}>
                                                <div style={{ marginRight: "45px", display: "inline-block" }}>优惠券</div>
                                                <div style={{ display: "inline-block" }}>-¥ 10</div>
                                            </div>
                                            <div style={{ padding: "5px 0px" }}>
                                                <div style={{ marginRight: "30px", display: "inline-block" }}>实付金额</div>
                                                <div style={{ display: "inline-block" }}>¥ 40</div>
                                            </div>
                                            <div style={{ padding: "5px 0px" }}>
                                                <div style={{ marginRight: "30px", display: "inline-block" }}>支付方式</div>
                                                <div style={{ display: "inline-block" }}>微信</div>
                                            </div>
                                            <div style={{ padding: "5px 0px" }}>
                                                <div style={{ marginRight: "30px", display: "inline-block" }}>创建时间</div>
                                                <div style={{ display: "inline-block" }}>2024-09-04  09:55:00</div>
                                            </div>
                                            <div style={{ padding: "5px 0px" }}>
                                                <div style={{ marginRight: "30px", display: "inline-block" }}>支付时间</div>
                                                <div style={{ display: "inline-block" }}>2024-09-04  09:58:00</div>
                                            </div>
                                        </div>
                        }



                        <div style={{ marginTop: "60px", backgroundColor: "#FFFFFF", height: "50px" }}>
                            <Sticky threshold={0} position='bottom' >
                                <div style={{ backgroundColor: "#FFFFFF" }}>
                                    {
                                        item.flag === 0 ?
                                            <div>
                                                <button onClick={() => {
                                                    setShowBasic(true)
                                                }} style={{ margin: "11px 13px", border: "1px solid #0A7EFE", borderRadius: "15px", height: "30px", backgroundColor: "white" }}>
                                                    查看原始处方<Popup
                                                        zIndex={2000}
                                                        visible={showBasic}
                                                        style={{ padding: '80px 160px' }}
                                                        onClose={() => { setShowBasic(false) }}>
                                                        <img style={{ width: "300px" }} src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/11385343fbf2b2112c67119fce8065380dd78e92.jpg'></img>
                                                    </Popup>
                                                </button>
                                                <button onClick={() => { setShowBasic1(true) }} style={{ margin: "11px 13px", border: "1px solid #0A7EFE", borderRadius: "15px", height: "30px", backgroundColor: "white" }}>查看处方二维码
                                                    <Popup
                                                        zIndex={2000}
                                                        visible={showBasic1}
                                                        style={{ padding: '80px 160px' }}
                                                        onClose={() => { setShowBasic1(false) }}>
                                                        <img style={{ width: "300px" }} src="https://img1.baidu.com/it/u=3685234108,954911792&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200"></img>
                                                    </Popup>
                                                </button>
                                                <button style={{ margin: "11px 13px", border: "1px solid #0A7EFE", borderRadius: "15px", height: "30px", backgroundColor: "white" }}>重新开处方</button>
                                            </div> : item.flag === 1 ?
                                                <div>
                                                    <button onClick={() => { setShowBasic(true) }} style={{ margin: "11px 44px", border: "1px solid #0A7EFE", borderRadius: "15px", height: "30px", backgroundColor: "white"}}>查看原始处方
                                                        <Popup
                                                            zIndex={2000}
                                                            visible={showBasic}
                                                            style={{ padding: '80px 160px' }}
                                                            onClose={() => { setShowBasic(false) }}>
                                                            <img style={{ width: "300px" }} src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/11385343fbf2b2112c67119fce8065380dd78e92.jpg'></img>
                                                        </Popup>
                                                    </button>
                                                    <button onClick={() => { setShowBasic1(true) }} style={{ margin: "11px 44px", border: "1px solid #0A7EFE", borderRadius: "15px", height: "30px", backgroundColor: "white" }}>查看处方二维码
                                                        <Popup
                                                            zIndex={2000}
                                                            visible={showBasic1}
                                                            style={{ padding: '80px 160px' }}
                                                            onClose={() => { setShowBasic1(false) }}>
                                                            <img style={{ width: "300px" }} src="https://img1.baidu.com/it/u=3685234108,954911792&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200"></img>
                                                        </Popup>
                                                    </button>
                                                </div> : item.flag === 2 ?
                                                    <div>
                                                        <button onClick={() => { setShowBasic2(true) }} style={{ margin: "11px 16px", border: "1px solid #0A7EFE", borderRadius: "15px", height: "30px", backgroundColor: "white" }}>查看处方
                                                            <Popup
                                                                zIndex={2000}
                                                                visible={showBasic2}
                                                                style={{ padding: '80px 160px' }}
                                                                onClose={() => { setShowBasic2(false) }}>
                                                                <img style={{ width: "150px" }} src="https://p5.itc.cn/q_70/images03/20230529/e6075d110841469bbed9ec383ff2ab9e.jpeg"></img>
                                                            </Popup>
                                                        </button>
                                                        <button onClick={() => { setShowBasic1(true) }} style={{ margin: "11px 16px", border: "1px solid #0A7EFE", borderRadius: "15px", height: "30px", backgroundColor: "white" }}>查看处方二维码
                                                            <Popup
                                                                zIndex={2000}
                                                                visible={showBasic1}
                                                                style={{ padding: '80px 160px' }}
                                                                onClose={() => { setShowBasic1(false) }}>
                                                                <img style={{ width: "300px" }} src="https://img1.baidu.com/it/u=3685234108,954911792&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200"></img>
                                                            </Popup>
                                                        </button>
                                                        <button onClick={() => { setShowBasic(true) }} style={{ margin: "11px 16px", border: "1px solid #0A7EFE", borderRadius: "15px", height: "30px", backgroundColor: "white" }}>查看原始处方
                                                            <Popup
                                                                zIndex={2000}
                                                                visible={showBasic}
                                                                style={{ padding: '80px 160px' }}
                                                                onClose={() => { setShowBasic(false) }}>
                                                                <img style={{ width: "300px" }} src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/11385343fbf2b2112c67119fce8065380dd78e92.jpg'></img>
                                                            </Popup>
                                                        </button>
                                                    </div> : <div>
                                                        <button onClick={() => { setShowBasic2(true) }} style={{ margin: "11px 16px", border: "1px solid #0A7EFE", borderRadius: "15px", height: "30px", backgroundColor: "white" }}>查看处方
                                                            <Popup
                                                                zIndex={2000}
                                                                visible={showBasic2}
                                                                style={{ padding: '80px 160px' }}
                                                                onClose={() => { setShowBasic2(false) }}>
                                                                <img style={{ width: "150px" }} src="https://p5.itc.cn/q_70/images03/20230529/e6075d110841469bbed9ec383ff2ab9e.jpeg"></img>
                                                            </Popup>
                                                        </button>
                                                        <button onClick={() => { setShowBasic1(true) }} style={{ margin: "11px 16px", border: "1px solid #0A7EFE", borderRadius: "15px", height: "30px", backgroundColor: "white" }}>查看处方二维码
                                                            <Popup
                                                                zIndex={2000}
                                                                visible={showBasic1}
                                                                style={{ padding: '80px 160px' }}
                                                                onClose={() => { setShowBasic1(false) }}>
                                                                <img style={{ width: "300px" }} src="https://img1.baidu.com/it/u=3685234108,954911792&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200"></img>
                                                            </Popup>
                                                        </button>
                                                        <button onClick={() => { setShowBasic(true) }} style={{ margin: "11px 16px", border: "1px solid #0A7EFE", borderRadius: "15px", height: "30px", backgroundColor: "white" }}>查看原始处方
                                                            <Popup
                                                                zIndex={2000}
                                                                visible={showBasic}
                                                                style={{ padding: '80px 160px' }}
                                                                onClose={() => { setShowBasic(false) }}>
                                                                <img style={{ width: "300px" }} src='https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/11385343fbf2b2112c67119fce8065380dd78e92.jpg'></img>
                                                            </Popup>
                                                        </button>
                                                    </div>
                                    }
                                </div>
                            </Sticky>
                        </div>
                    </div>
                ))
            }


        </div>
    )
}
